<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #xdd{
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script>
        // let fun1 = function(){}; //普通函数声明
        // let fun2 = () => {}; //箭头函数声明,lambda
        // let fun3 = (x) => {return x+1}; //箭头函数声明,lambda
        // let fun4 = x => {return x+1}; //参数中有且只有一个参数时，()可省略不写
        // let fun5 = x => console.log(x); //方法体中只有一条语句时，{}可省略不写
        // let fun6 = x => x+1; //参数中有且只有一条语句，且是return语句,则{}和return可省略不写

        /*
        箭头函数没有自己的this
        箭头函数中的this是外层上下文环境中的this
        */
       console.log(this)
       let person = {
        name:"gwc",
        showName:function(){
            console.log(this.name);
        },
        viewName:()=>{
            // 箭头函数的外层上下文是window
            console.log(this);
        }
       }
       person.showName();
       person.viewName();
    </script>
</head>
<body>
    <div id="xdd"></div>
    <script>
        // 必须定义在xdd的后边？
        let xdd = document.getElementById("xdd");
    //    xdd.onclick = function(){
    //     // 方案一
    //     let _this = this; // this是xdd
    //     window.setTimeout(function(){
    //         _this.style.backgroundColor="yellow";
    //     }, 2000);
    //    };

       xdd.onclick = function(){
        // 方案二 使用箭头函数
        window.setTimeout(()=>{
            this.style.backgroundColor = "yellow";
        }, 2000);
       }
    </script>
</body>
</html>